<template>
  <div class="service-block">
    <div
      class="service-item"
      @click="$emit('activeService', iconIndex)"
      :class="{ active: active }"
    >
      <img :src="active ? icons[iconIndex + 9] : icons[iconIndex]" alt="" />
      <div class="title" v-html="title"></div>
    </div>
    <div class="price">￥{{ price }}</div>
    <el-input-number
      :min="1"
      size="small"
      @change="changeAmount"
      :value="amount"
      v-if="amount > 0"
    ></el-input-number>
  </div>
</template>
<script>
const icon1 = require("./img/1.png");
const icon2 = require("./img/2.png");
const icon3 = require("./img/3.png");
const icon4 = require("./img/4.png");
const icon5 = require("./img/5.png");
const icon6 = require("./img/6.png");
const icon7 = require("./img/7.png");
const icon8 = require("./img/8.png");

const icon1a = require("./img/1a.png");
const icon2a = require("./img/2a.png");
const icon3a = require("./img/3a.png");
const icon4a = require("./img/4a.png");
const icon5a = require("./img/5a.png");
const icon6a = require("./img/6a.png");
const icon7a = require("./img/7a.png");
const icon8a = require("./img/8a.png");
export default {
  name: "ServiceItem",
  props: {
    title: String,
    iconIndex: Number,
    active: Boolean,
    price: Number,
    value: Number,
    amount: Number
  },
  data() {
    return {
      icons: {
        1: icon1,
        2: icon2,
        3: icon3,
        4: icon4,
        5: icon5,
        6: icon6,
        7: icon7,
        8: icon8,
        9: icon1,
        10: icon1a,
        11: icon2a,
        12: icon3a,
        13: icon4a,
        14: icon5a,
        15: icon6a,
        16: icon7a,
        17: icon8a,
        18: icon1a
      }
    };
  },
  created() {},
  methods: {
    changeAmount(currentValue) {
      this.$emit("changeAmount", this.iconIndex, currentValue);
    }
  }
};
</script>
<style lang="scss">
.service-block {
  .service-item {
    width: 90px;
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px 18px;
    text-align: center;
    align-items: center;
    border: 1px solid #000;
    border-radius: 4px;
    cursor: pointer;
    img {
      width: 36px;
      height: auto;
    }
    &.active {
      background: #5284ff;
      .title {
        color: #fff;
      }
    }
    .title {
      color: #c8cfdf;
      font-size: 12px;
    }
  }
  .price {
    text-align: center;
    color: #c8cfdf;
    margin: 8px 0;
    font-size: 14px;
  }
  .el-input-number {
    width: 96px;
    .el-input-number__decrease,
    .el-input-number__increase {
      border-radius: 4px;
      background: #5284ff;
      border: none;
      color: #fff;
      width: 20px;
      height: 20px;
      line-height: 20px;
    }
    .el-input__inner {
      background: transparent;
      border: none;
      color: #fff;
      position: relative;
      top: -3px;
      height: 20px;
      line-height: 20px;
    }
  }
}
</style>
